<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx"></headerCom>
    <!-- 内容区域 -->
    <view class="content">
      <!-- 标题 -->
      <view class="title">{{ swiperdetaildate.title }}</view>
      <!-- 时间 -->
      <view class="time">2022-12-12 10:30:33</view>
      <!-- 富文本内容 -->
      <view style="padding: 0 25rpx; font-size: 28rpx">
        <rich-text :nodes="swiperdetaildate.content"></rich-text>
      </view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>
<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
import { getswiperdeatilDate } from '@/services/shop.js';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {
      swiperdetaildate: {}
    };
  },
  onLoad(value) {
    // 获取轮播图的id
    console.log(value.swiperid);
    this.getswiperdetail(value.swiperid);
  },
  methods: {
    // 获取轮播图的详情
    async getswiperdetail(id) {
      const res = await getswiperdeatilDate(id);
      console.log('轮播图详情数据---------', res);
      this.swiperdetaildate = res.result.data;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .content {
    .title {
      font-size: 30rpx;
      margin: 24rpx 0 12rpx 26rpx;
    }
    .time {
      font-size: 26rpx;
      margin: 0 0 28rpx 26rpx;
    }
  }
}
</style>
